import { AfterViewInit, Component, OnInit } from '@angular/core';
import { FeeEnquiryService } from 'src/app/service/fee-enquiry/fee-enquiry.service';
import { UsageCodeData, UserBindService } from 'src/app/service/user-bind.service';
declare let echarts: any

@Component({
  selector: 'app-water-usage',
  templateUrl: './water-usage.component.html',
  styleUrls: ['./water-usage.component.scss']
})
export class WaterUsageComponent implements OnInit, AfterViewInit {
  title = '用水情况'
  constructor(
    private userBind: UserBindService,
    private feeEnquiry: FeeEnquiryService
  ) { }


  ngAfterViewInit(): void {
    
  }

  myChart: any = null
  ngOnInit(): void {
    let chartDom = document.getElementById('waterUsageChart');
    this.myChart = echarts.init(chartDom);

    this.getUsageCodeList()
  }

  usageCode = ''
  onUsageCodeChange(value: string) {
    this.usageCode = value
    this.address = this.usageCodeInfoList.find(_ => _.usageCode === value)?.address
    this.getData()
  }

  address: string | undefined = ''
  usageCodeLoading = false
  usageCodeInfoList: UsageCodeData[] = []
  getUsageCodeList() {
    this.usageCodeLoading = true;
    this.userBind._getBindList().subscribe({
      next: res => {
        this.usageCodeInfoList = res;
        this.usageCodeLoading = false;

        if (!res || res.length <= 0) {
          return
        }
        this.initUsageCode(res[0]);
      },
      error: error => {
        // this.util.createErrorMessage(error);
        this.usageCodeLoading = false;
      }
    }
    )
  }
  initUsageCode(item: UsageCodeData) {
    this.usageCode = item.usageCode;
    this.address = item.address;
    console.log(item)
    this.getData();
  }
  getData() {
    this.myChart.clear()
    this.feeEnquiry._getWaterUsage(this.usageCode).subscribe({
      next: (res: any) => {
        console.log(res)
        if(res && res.length > 0){
          const xData = res.map((_: any) => _.period)
          const waterQuantity = res.map((_: any) => _.waterQuantity)
          const sewageQuantity = res.map((_: any) => _.sewageQuantity)
          
          this.myChart?.setOption(this.getChartOption(xData, waterQuantity, sewageQuantity))
        }
      },
      error: (error: any) => {
        console.log(error)
      }
    })
  }
  getChartOption(xData: any[], waterQuantity: any[], sewageQuantity: any[]) {
    // let xData = ["01", "02", "03", "04"];
    let legendData = ["用水量", "污水量"]; //图例
    // let waterQuantity = [72, 37, 4, 75]; //第一产业
    // let sewageQuantity = [8, 15, 34, 31]; //第三产业
    return {
      // backgroundColor: "#061740",
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
        top: '15%',
        left: '3%',
        right: '3%',
        bottom: '20%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        orient: 'vertical',
        left: 'center',
        bottom: 'bottom',
        padding: [10, 0, 0, 0],
        data: legendData,
        //图例滚动
        // type: 'scroll',
        //图例文字样式
        textStyle: {
          // color: 'rgba(36, 173, 254, 1)',
          color: 'rgba(0, 0, 0, 1)',
          fontSize: "1rem"
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: false,
          },
          interval: 1,
          axisLabel: {
            // color: 'rgba(36, 173, 254, 1)',
            color: 'rgba(0, 0, 0, 1)',
            fontSize: "1rem"
          },
          axisLine: {
            show: false
          },
          data: xData,
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          // min: 0,
          // max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} ',
            textStyle: {
              //坐标轴颜色
              // color: 'rgba(36, 173, 254, 1)',
              color: 'rgba(0, 0, 0, 1)',
              fontSize: "1rem"
            }
          },
          //坐标轴线样式
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid', //solid实线;dashed虚线
              // color: 'rgba(36, 173, 254, 0.2)'
              color: 'rgba(0, 0, 0, 0.2)'
            }
          },
        },
        {
          type: 'value',
          name: '',
          // min: 0,
          // max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              //坐标轴颜色
              // color: 'rgba(36, 173, 254, 1)',
              color: 'rgba(0, 0, 0, 1)',
              fontSize: "1rem"
            }
          },
          //坐标轴线样式
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              // color: 'rgba(36, 173, 254, 0.2)'
              color: 'rgba(0, 0, 0, 0.2)'
            }
          },
        }
      ],
      series: [
        {
          name: legendData[0],
          data: waterQuantity,
          type: 'line',
          smooth: true, //true曲线; false折线
          itemStyle: {
            normal: {
              color: '#24adfe', //改变折线点的颜色
              lineStyle: {
                color: '#24adfe', //改变折线颜色
                type: 'solid'
              }
            }
          },
          areaStyle: {
            //折线图颜色半透明
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          name: legendData[1],
          data: sewageQuantity,
          type: 'line',
          smooth: true, //true曲线; false折线
          itemStyle: {
            normal: {
              color: '#ffc600', //改变折线点的颜色
              lineStyle: {
                color: '#ffc600', //改变折线颜色
                type: 'solid'
              }
            }
          },
          areaStyle: {
            //折线图颜色半透明
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(36,173,254, 0.5)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(52,112,252, 0.1)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    };
  }
}
